<template>
  <div class="mod-config">
    <!--表格栏-->
    <el-table
      :data="content"
      :highlight-current-row="highlightCurrentRow"
      @selection-change="selectionChange"
      @current-change="handleCurrentChange"
      v-loading="loading"
      element-loading-text="拼命加载中"
      :border="border"
      :stripe="stripe"
      :show-overflow-tooltip="showOverflowTooltip"
      :max-height="maxHeight"
      :size="size"
      :align="align"
      style="width:100%;"
      :header-cell-style="{ 'color': '#909399'}"
    >
      <el-table-column type="selection" width="50" v-if="showSelection"
                       fixed="left"></el-table-column>
      <el-table-column type="index" width="50" v-if="showIndex"></el-table-column>

      <template v-for="column in columns">
        <el-table-column
          header-align="center"
          align="center"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :key="column.prop"
          :type="column.type"
          :formatter="column.formatter"
          :sortable="column.sortable==null?true:column.sortable"
        >
          <template slot-scope="scope">
            <template v-if="column.showType==='image'">
              <img :src="scope.row[column.prop]" :style="{width:column.imgSize.width+'px',height:column.imgSize.height+'px'}"/>
            </template>
            <template v-else>
              <template v-if="!column.render">
                <template v-if="column.formatter">
                  <div
                    v-html="column.formatter(scope.row, column,scope.row[column.prop],scope.index)"
                  ></div>
                </template>
                <template v-else>
                  <span>{{scope.row[column.prop]}}</span>
                </template>
              </template>
              <template v-else>
                <expand-dom :column="column" :row="scope.row" :render="column.render"
                            :index="index"></expand-dom>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        label="操作"
        :width="operationWidth"
        fixed="right"
        v-if="showOperation"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="copy(scope.row)">复制</el-button>
          <el-button size="mini" type="success" @click="handleEdit('detail', scope.row)">查看</el-button>
          <el-button size="mini" type="primary" v-if="scope.row.status==11" @click="handleEdit('edit', scope.row)">编辑</el-button>
          <el-button size="mini" type="info" v-if="scope.row.status==10" @click="statusUpdate(12,scope.row)">关闭</el-button>
          <el-button size="mini" type="danger" v-if="scope.row.status==12||scope.row.status==13||scope.row.status==14" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="warning" v-if="scope.row.status==14" @click="statusUpdate(11,scope.row)">发布</el-button>
          <el-button size="mini" type="info" v-if="scope.row.status==11" @click="statusUpdate(10,scope.row)">生效</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;" v-show="showPagenation">
      <kt-button
        label="批量删除"
        :perms="permsDelete"
        :size="size"
        type="danger"
        @click="handleBatchDelete()"
        :disabled="this.selections.length===0"
        style="float:left;"
        v-if="showBatchDelete & showOperation"
      />
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import KtButton from "@/views/Core/KtButton";
  export default {
    name: "LiveBannerQueueTable",
    components: {
      KtButton
    },
    props:{
      url: "", // 表格列配置
      columns: Array, // 表格列配置
      data: Object, // 表格分页数据
      permsEdit: String, // 编辑权限标识
      permsDelete: String, // 删除权限标识
      permsDetail: String, // 详情权限标识
      permsCheckLable: String,
      // 操作部分宽度
      operationWidth: {
        type: Number,
        default: 185
      },
      size: {
        // 尺寸样式
        type: String,
        default: "mini"
      },
      align: {
        // 文本对齐方式
        type: String,
        default: "left"
      },
      maxHeight: {
        // 表格最大高度
        type: Number,
        default: 900
      },
      height: {
        // 表格最大高度
        type: Number,
        default: 500
      },
      showOperation: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      border: {
        // 是否显示边框
        type: Boolean,
        default: true
      },
      stripe: {
        // 是否显示斑马线
        type: Boolean,
        default: true
      },
      highlightCurrentRow: {
        // // 是否高亮当前行
        type: Boolean,
        default: true
      },
      showOverflowTooltip: {
        // 是否单行显示
        type: Boolean,
        default: true
      },
      showBatchDelete: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      showIndex: {
        // 是否显示操作组件
        type: Boolean,
        default: false
      },
      showSelection: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      // 是否显示分页
      showPagenation:{
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        totalSize: 0,
        content: [],
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        loading: false, // 加载标识
        selections: [],// 列表选中列
        mock_title: null,
      }
    },
    mounted: function () {
      this.refreshPageRequest(1);
    },
    methods: {
      // 查询
      query(filters){
        this.pageRequest.pageNum = 1;
        this.findPage(filters)
      },
      // 分页查询
      findPage: function (filters) {
        let params={};
        if (filters) {
          for(let key in filters){
            if(filters[key]){
              params[key]=filters[key];
            }
          }
        }
        params.pageNum = this.pageRequest.pageNum;
        params.pageSize = this.pageRequest.pageSize;
        this.utils.request.liveRequest({
          url: this.url,
          method: 'get',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.content = data.data.rows;
            this.totalSize = Number(data.data.total);
          } else {
            this.content = []
            this.totalSize = 0
          }
          this.dataListLoading = false
        })
      },
      //根据日期来进行查询
      findPageByDate: function (filters) {
        //this.loading = true
        var this_ = this;
        if (filters == undefined || filters == null) {
          filters = {};
        }
        this.utils.request.queryUserList(filters, function (res) {
          if (res.data == null) {
            res.data = [];
          }
          this_.content = res.data;
          this_.totalSize = res.data.length;
        });
      },
      init: function () {
        this.$emit("findPage");
      },
      // 选择切换
      selectionChange: function (selections) {
        this.selections = selections;
        this.$emit("selectionChange", {selections: selections});
      },
      // 选择切换
      handleCurrentChange: function (val) {
        this.$emit("handleCurrentChange", {val: val});
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.init();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.init();
      },
      // 编辑
      handleEdit: function (type, row) {
        this.$emit("handleEdit", {type: type, row: row});
      },
      // 删除
      handleDelete: function (index, row) {
        this.delete(row.id);
      },
      // 批量删除
      handleBatchDelete: function () {
        let ids = this.selections.map(item => item.id).toString();
        this.delete(ids);
      },
      // 删除操作
      delete: function (ids) {
        this.$confirm("确认删除选中记录吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            let params = [];
            let idArray = (ids + "").split(",");
            for (var i = 0; i < idArray.length; i++) {
              params.push({id: idArray[i]});
            }
            //this.loading = true
            let callback = res => {
              if (res.code == "0000") {
                this.$message({message: "删除成功", type: "success"});
                this.init();
              } else {
                this.$message({message: "操作失败, " + res.msg, type: "error"});
              }
              this.loading = false;
            };
            this.$emit("handleDelete", {params: params, callback: callback});
          })
          .catch(() => {
          });
      },
      resetForm(dataForm) {
        this.pageRequest = {
          pageNum: 1,
          pageSize: 10
        };
        this.findPage(dataForm)
      },
      // 复制
      copy(row){
        this.$emit("copy", row);
      },
      // 状态更新
      statusUpdate(status,row){
        let msg = "";
        if(status == 10){ // 生效
          msg = "您确定要立即生效此项列表吗？"
        } else if(status == 12){
          msg = "您确定要关闭此项列表吗？"
        } else if(status == 11){
          msg = "您确定要发布此项列表吗？"
        }
        this.$confirm(msg, "提示", {
          type: "info"
        })
          .then(() => {
            let id = row.id;
            let params = {
              status:status
            }
            this.utils.request.liveRequest({
              url: '/api/v1/liveBannerQueue/state/'+id+'/update',
              method: 'get',
              params: params
            }).then(result => {
              this.$message({message: "操作成功", type: "success"});
              this.init();
            })
          })
          .catch(() => {
          });
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
